<template>
  <div class="module">
    <my-header></my-header>
    <footer>
      <my-scroll :opacity="0.5" ref="scroll">
        <div class="bottom">
          <div class="bottom_box">
            <div class="f_left">
              <my-scroll opacity="0.5">
                <my-left></my-left>
              </my-scroll>
            </div>
            <div class="f_right">
              <keep-alive include="archive">
                <router-view></router-view>
              </keep-alive>
            </div>
          </div>
        </div>
      </my-scroll>
    </footer>
  </div>
</template>
<script>
import MyHeader from './component/Header'
import MyLeft from './component/Left'
export default {
  name: 'module',
  data() {
    return {}
  },
  components: {
    MyHeader,
    MyLeft
  },
  created() {
    this.$EventBus.$on('goTop', () => {
      if (this.$refs['scroll'] && this.$refs['scroll'].$refs['vs']) {
        this.$refs['scroll'].$refs['vs'].scrollTo(
          {
            y: '0%'
          },
          500
        )
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.module {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
  z-index: 11;
  footer {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    .bottom {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      .bottom_box {
        height: 100%;
        width: 100%;
        max-width: 1300px;
        padding: 0px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .f_left {
          width: 340px;
          height: calc(100% - 100px);
          position: fixed;
          top: 80px;
          z-index: 10;
        }
        .f_right {
          margin-left: 350px;
          width: calc(100% - 350px);
          height: 100%;
        }
      }
    }
  }
}
@media (max-width: 600px) {
  .module {
    footer {
      height: calc(100vh - 60px);
      .bottom {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        .bottom_box {
          height: 100%;
          width: 100%;
          padding: 0px;
          // max-width: 1150px;
          display: flex;
          justify-content: space-between;
          .f_left {
            display: none;
          }
          .f_right {
            margin-left: 0px;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
